<template>
  <div class="containerPage">
    <div class="breadcrumb">
      <div>{{ routeName }}</div>
    </div>
    <div class="content">
      <el-divider>
        <div class="item">
          <i class="el-icon-warning"></i>
          危险区
        </div>
      </el-divider>
      <div class="title">
        <div>删除日历</div>
        <div class="tip">如果此日历不再使用，可以删除它，删除后日历下的日程也会一并删除，并且无法恢复。</div>
      </div>
      <div class="btn">
        <el-button type="danger" @click="openDelDialog">删除日历</el-button>
      </div>
    </div>
    <el-dialog title="删除日历" v-model="dialogVisible" width="600px" :close-on-click-modal="false"
      :before-close="handleClose">
      <p style="color: #333; font-size: 14px;">
        删除后日历下的日程也会一并删除，并且无法恢复，确认要删除日历：<span style="color: #ff7575;">{{
          data.scheduleName
        }}</span>
      </p>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="danger" @click="deleteCalendar">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>


<script lang="ts" setup>
import { sysScheduleDelete } from '@/api/calendar'
const router = useRouter()
const routeName = ref(router.currentRoute.value.meta.title)
const dialogVisible = ref(false)
const data = ref(JSON.parse(localStorage.getItem("scheduleData")) || {})


const openDelDialog = () => {
  dialogVisible.value = true
}
const handleClose = () => {
  dialogVisible.value = false
}
const deleteCalendar = async () => {
  let res = await sysScheduleDelete(data.value.id)
  if (res.code == 200) {
    ElMessage.success("删除成功")
    localStorage.removeItem("scheduleData")
    router.push("/calendar/index/myCalendar")
  }
}
</script>







<style lang="scss" scoped>
:deep(.el-divider) {
  background-color: #ff7575 !important;
}

:deep(.el-dialog__body) {
  padding: 0px 20px;
}

.containerPage {
  width: 100%;
  height: 100%;

  .breadcrumb {
    border-bottom: 1px solid #eee;
    height: 51px;
    line-height: 51px;
    padding-left: 20px;
    font-size: 14px;
    color: #333;
  }

  .content {
    width: 800px;
    padding-top: 32px;
    padding-left: 40px;

    .item {
      padding: 4px 10px;
      background-color: rgba(255, 177, 177, 0.1);
      color: #ff7575;
      border-radius: 10px;

      i {
        padding-right: 2px;
      }
    }

    .title {
      margin-top: 60px;
      font-size: 14px;

      .tip {
        margin-top: 12px;

        color: #aaa;
      }
    }

    .btn {
      margin-top: 20px;

      .el-button:hover {
        box-shadow: 0 2px 5px 1px rgba(255, 117, 117, 0.6);
      }
    }
  }
}
</style>